<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>GoldenLayout- a multi-window javascript layout manager for webapps</title>
	
	<meta http-equiv="content-type" content="text/html; charset=utf-8" />
	<meta name="keywords" content="HTML5, JavaScript, Layout Manager, webapp" />
	<meta name="description" content="GoldenLayout- a multi-window javascript layout manager for webapps" />
	<meta name="author" content="Wolfram Hempel" />
	<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon">
	<link rel="icon" href="/favicon.ico" type="image/x-icon">
	<link href='https://fonts.googleapis.com/css?family=Roboto:400,300,100,500,700' rel='stylesheet' type='text/css'>
	<link rel="stylesheet" type="text/css" href="../assets/css/screen.css" />
	
	<link rel="stylesheet" type="text/css" href="../assets/css/api.css" />
	<link rel="stylesheet" type="text/css" href="../assets/css/syntaxhighlighter.css" />
	
	<script type="text/javascript">
	document.createElement( 'header' );
	document.createElement( 'nav' );
	</script>
	<script type="text/javascript" src="../assets/js/jquery.js"></script>
</head>
<body class="category_docs">
	<div id="modal" class="loading">
		<div class="background"></div>
		<div class="content-wrapper">
			<div class="head">
				<div class="close"></div>
				<span class="title"></span>
			</div>
			<div class="content"></div>
		</div>
	</div>
	
	<div id="outerWrapper">
		

		
		<div id="nav" class="standalone">
			<div class="start-bg"></div>
			<ul>
				<li ><a href="..">Start</a></li>
				<li ><a href="../download">Download</a></li>
				<li ><a href="../examples">Demos</a></li>
				<li ><a href="../tutorials">Tutorials</a></li>
				<li class="active"><a href="../docs">Docs</a></li>
				<li ><a href="../faq">Faq</a></li>
			</ul>
			<iframe src="https://ghbtns.com/github-btn.html?user=deepstreamIO&repo=golden-layout&type=star&count=true&size=large" frameborder="0" scrolling="0" width="160px" height="30px"></iframe>

		</div>
		
		<div id="wrapper" class="main">
			<ul id="subnav">
	<li class="head first">Configuration</li>
	<li >
		<a href="Config.html">Layout Config</a>
		<div class="isActiveIndicator orangeGradient"></div>
	</li>
	<li >
		<a href="ItemConfig.html">Item Config</a>
		<div class="isActiveIndicator orangeGradient"></div>
	</li>

	<li class="head">API</li>
	<li class="active">
		<a href="GoldenLayout.html">GoldenLayout</a>
		<div class="isActiveIndicator orangeGradient"></div>
		
			<ul class="overview">
				
				<li><a href="#Properties">Properties</a></li>
				
				<li><a href="#Events">Events</a></li>
				
				<li><a href="#GoldenLayout( configuration, container )">GoldenLayout( configuration, container )</a></li>
				
				<li><a href="#registerComponent( name, component )">registerComponent( name, component )</a></li>
				
				<li><a href="#init()">init()</a></li>
				
				<li><a href="#toConfig()">toConfig()</a></li>
				
				<li><a href="#getComponent( name )">getComponent( name )</a></li>
				
				<li><a href="#updateSize(width, height)">updateSize(width, height)</a></li>
				
				<li><a href="#destroy()">destroy()</a></li>
				
				<li><a href="#createContentItem( itemConfiguration, parent )">createContentItem( itemConfiguration, parent )</a></li>
				
				<li><a href="#createPopout( configOrContentItem, dimensions, parentId, indexInParent )">createPopout( configOrContentItem, dimensions, parentId, indexInParent )</a></li>
				
				<li><a href="#createDragSource( element, itemConfiguration )">createDragSource( element, itemConfiguration )</a></li>
				
				<li><a href="#selectItem( contentItem )">selectItem( contentItem )</a></li>
				
				<li><a href="#GoldenLayout.minifyConfig( config )">GoldenLayout.minifyConfig( config )</a></li>
				
				<li><a href="#GoldenLayout.unminifyConfig( minifiedConfig )">GoldenLayout.unminifyConfig( minifiedConfig )</a></li>
				
			</ul>
		
	</li>
	<li >
		<a href="Item.html">ContentItem</a>
		<div class="isActiveIndicator orangeGradient"></div>
		
	</li>
	<li >
		<a href="Container.html">Container</a>
		<div class="isActiveIndicator orangeGradient"></div>
		
	</li>
	<li >
		<a href="BrowserWindow.html">BrowserWindow</a>
		<div class="isActiveIndicator orangeGradient"></div>
		
	</li>
	<li >
		<a href="Header.html">Header</a>
		<div class="isActiveIndicator orangeGradient"></div>
		
	</li>
	<li >
		<a href="Tab.html">Tab</a>
		<div class="isActiveIndicator orangeGradient"></div>
		
	</li>
	<li >
		<a href="EventEmitter.html">EventEmitter</a>
		<div class="isActiveIndicator orangeGradient"></div>
		
	</li>
</ul>
			<div id="content">
				<div class="section"><h2><a name="Properties">Properties</a></h2><h3>root</h3><p>The topmost item in the layout item tree. In browser terms: Think of the GoldenLayout instance as
window object and of goldenLayout.root as the document.</p><h3>container</h3><p>A reference to the (jQuery) DOM element containing the layout</p><h3>isInitialised</h3><p>True once the layout item tree has been created and the <code>initialised</code> event has been fired.</p><h3>config</h3><p>A reference to the current, extended top level config.</p><div class="info">Don&#39;t rely on this object for state saving / serialisation. Use layout.toConfig() instead.</div>

<h3>selectedItem</h3><p>The currently selected item or null if no item is selected. Only relevant if <code>settings.selectionEnabled</code> is set to true.</p><h3>width</h3><p>The current outer width of the layout in pixels</p><h3>height</h3><p>The current outer height of the layout in pixels</p><h3>openPopouts</h3><p>An array of <a href="BrowserWindow.html">BrowserWindow</a> instances</p><h3>isSubWindow</h3><p>True if the layout has been opened as a popout by another layout</p><h3>eventHub</h3><p>A singleton instance of <a href="EventEmitter.html">EventEmitter</a> that works across windows</p></div><div class="section"><h2><a name="Events">Events</a></h2><h3>initialised</h3><p>Fired after <code>layout.init()</code> has been called and the layout tree has been created.</p><h3>stateChanged</h3><p>Fired whenever something happens that updates the state of the layout (as returned by <code>layout.toConfig</code>)</p><h3>windowOpened <window></h3><p>Fired when a new popout window was opened.</p><h3>windowClosed <window></h3><p>Fired when a previously created popout window was closed.</p><h3>selectionChanged <item></h3><p>Fired when the user selects a new / different item. Only relevant if <code>settings.selectionEnabled</code> is true.</p><h3>itemDestroyed <item></h3><p>Fired whenever an item gets destroyed.</p><h3>itemCreated <item></h3><p>Fired whenever an item is created.</p><h3>componentCreated <component></h3><p>Fired whenever a component is created.</p><h3>rowCreated <row></h3><p>Fired whenever a row is created.</p><h3>columnCreated <column></h3><p>Fired whenever a column is created.</p><h3>stackCreated <stack></h3><p>Fired whenever a stack is created.</p><h3>tabCreated <tab></h3><p>Fired whenever a tab is created.</p></div><div class="section"><h2><a name="GoldenLayout( configuration, container )">GoldenLayout( configuration, container )</a></h2><table class="args"><thead><tr><th>argument</th><th>type</th><th>optional</th><th>default</th><th>description</th></tr></thead><tbody><tr><td class="argument">configuration</td><td class="type">configuration</td><td class="optional">false</td><td class="default">-</td><td class="description">A GoldenLayout configuration object</td></tr><tr><td class="argument">container</td><td class="type">DOM | jQuery element</td><td class="optional">true</td><td class="default">document.body</td><td class="description">The DOM element the layout will be initialised in</td></tr></tbody></table><p>Constructs a new layout. The simplest use case would look something like this</p><pre><code>myLayout <span class="token operator" >=</span> <span class="token keyword" >new</span> <span class="token class-name" >GoldenLayout</span><span class="token punctuation" >(</span><span class="token punctuation" >{</span>
    content<span class="token punctuation" >:</span><span class="token punctuation" >[</span><span class="token punctuation" >{</span> 
        type<span class="token punctuation" >:</span> <span class="token string" >'component'</span><span class="token punctuation" >,</span> 
        componentName<span class="token punctuation" >:</span> <span class="token string" >'sayHi'</span><span class="token punctuation" >,</span>
        componentState<span class="token punctuation" >:</span> <span class="token punctuation" >{</span> name<span class="token punctuation" >:</span> <span class="token string" >'Wolfram'</span> <span class="token punctuation" >}</span>
    <span class="token punctuation" >}</span><span class="token punctuation" >]</span>
<span class="token punctuation" >}</span><span class="token punctuation" >)</span><span class="token punctuation" >;</span>
myLayout<span class="token punctuation" >.</span><span class="token function" >registerComponent<span class="token punctuation" >(</span></span> <span class="token string" >'sayHi'</span><span class="token punctuation" >,</span>  <span class="token keyword" >function</span><span class="token punctuation" >(</span> container<span class="token punctuation" >,</span> state <span class="token punctuation" >)</span><span class="token punctuation" >{</span>
    container<span class="token punctuation" >.</span><span class="token function" >getElement<span class="token punctuation" >(</span></span><span class="token punctuation" >)</span><span class="token punctuation" >.</span><span class="token function" >text<span class="token punctuation" >(</span></span> <span class="token string" >'Hi '</span> <span class="token operator" >+</span> state<span class="token punctuation" >.</span>name <span class="token punctuation" >)</span><span class="token punctuation" >;</span> 
<span class="token punctuation" >}</span><span class="token punctuation" >)</span><span class="token punctuation" >;</span>
myLayout<span class="token punctuation" >.</span><span class="token function" >init<span class="token punctuation" >(</span></span><span class="token punctuation" >)</span><span class="token punctuation" >;</span>
</code></pre></div><div class="section"><h2><a name="registerComponent( name, component )">registerComponent( name, component )</a></h2><table class="args"><thead><tr><th>argument</th><th>type</th><th>optional</th><th>default</th><th>description</th></tr></thead><tbody><tr><td class="argument">name</td><td class="type">String</td><td class="optional">false</td><td class="default">-</td><td class="description">The name of the component, as referred to by componentName in the component configuration.</td></tr><tr><td class="argument">component</td><td class="type">Constructor | Function</td><td class="optional">false</td><td class="default">-</td><td class="description">A constructor or factory function. Will be invoked with new and two arguments, a container object and a component state.</td></tr></tbody></table><p>Registers either a component constructor or a component factory function with GoldenLayout. 
<code>registerComponent</code> is the counterpart to the componentName and componentState config keys in <a href="{link 'apidocs/Config'}">the item config</a>.</p><p>Here&#39;s how it hangs together:</p><pre><code><span class="token comment" spellcheck="true">// Write your StockChart component constructor
</span>StockChartComponent <span class="token operator" >=</span> <span class="token keyword" >function</span><span class="token punctuation" >(</span> container<span class="token punctuation" >,</span> state <span class="token punctuation" >)</span> <span class="token punctuation" >{</span>
   <span class="token comment" spellcheck="true"> //container will be an instance of {link 'apidocs/Container'}
</span><span class="token punctuation" >}</span><span class="token punctuation" >;</span>
<span class="token comment" spellcheck="true">
// Register it with your GoldenLayout instance
</span>myLayout<span class="token punctuation" >.</span><span class="token function" >registerComponent<span class="token punctuation" >(</span></span> <span class="token string" >'StockChart'</span><span class="token punctuation" >,</span> StockChartComponent <span class="token punctuation" >)</span><span class="token punctuation" >;</span>
<span class="token comment" spellcheck="true">
//Tell GoldenLayout where to create an instance of the component in
</span><span class="token comment" spellcheck="true">//your config
</span><span class="token punctuation" >{</span>
    componentName<span class="token punctuation" >:</span> <span class="token string" >'StockChart'</span><span class="token punctuation" >,</span>
    componentState<span class="token punctuation" >:</span> <span class="token punctuation" >{</span> stocks<span class="token punctuation" >:</span> <span class="token punctuation" >[</span> <span class="token string" >'APPL'</span><span class="token punctuation" >,</span> <span class="token string" >'GOOG'</span> <span class="token punctuation" >]</span> <span class="token punctuation" >}</span>
<span class="token punctuation" >}</span>
</code></pre><p>Alternatively you can provide a factory function.</p><pre><code>myLayout<span class="token punctuation" >.</span><span class="token function" >registerComponent<span class="token punctuation" >(</span></span> <span class="token string" >'StockChart'</span><span class="token punctuation" >,</span> <span class="token keyword" >function</span><span class="token punctuation" >(</span> container<span class="token punctuation" >,</span> state <span class="token punctuation" >)</span><span class="token punctuation" >{</span>
   <span class="token comment" spellcheck="true"> //For instance if you're using the same chart component and just pass
</span>   <span class="token comment" spellcheck="true"> //the type as an argument
</span>    <span class="token keyword" >return</span> <span class="token keyword" >new</span> <span class="token class-name" >GenericChart</span><span class="token punctuation" >(</span> <span class="token string" >'stock'</span><span class="token punctuation" >,</span> state <span class="token punctuation" >)</span><span class="token punctuation" >;</span>
<span class="token punctuation" >}</span><span class="token punctuation" >)</span><span class="token punctuation" >;</span>
</code></pre></div><div class="section"><h2><a name="init()">init()</a></h2><p>Renders the layout into the container. If init() is called before the
document is ready it attaches itself as a listener to the document and executes once it becomes ready.</p></div><div class="section"><h2><a name="toConfig()">toConfig()</a></h2><p>Returns the current state of the layout and its components as a serialisable object.</p></div><div class="section"><h2><a name="getComponent( name )">getComponent( name )</a></h2><table class="args"><thead><tr><th>argument</th><th>type</th><th>optional</th><th>default</th><th>description</th></tr></thead><tbody><tr><td class="argument">name</td><td class="type">String</td><td class="optional">false</td><td class="default">-</td><td class="description">The name of a previously registered component</td></tr></tbody></table><p>Returns a component that was previously registered with <code>layout.registerComponent()</code>.</p></div><div class="section"><h2><a name="updateSize(width, height)">updateSize(width, height)</a></h2><table class="args"><thead><tr><th>argument</th><th>type</th><th>optional</th><th>default</th><th>description</th></tr></thead><tbody><tr><td class="argument">width</td><td class="type">Integer</td><td class="optional">true</td><td class="default">The container elements width</td><td class="description">The outer width the layout should be resized to</td></tr><tr><td class="argument">height</td><td class="type">Integer</td><td class="optional">true</td><td class="default">The container elements height</td><td class="description">The outer height the layout should be resized to</td></tr></tbody></table><p>Resizes the layout. If no arguments are provided GoldenLayout measures its container
and resizes accordingly.</p></div><div class="section"><h2><a name="destroy()">destroy()</a></h2><p>Destroys the layout. Recursively calls destroy on all components and content items,
removes all event listeners and finally removes itself from the DOM.</p></div><div class="section"><h2><a name="createContentItem( itemConfiguration, parent )">createContentItem( itemConfiguration, parent )</a></h2><table class="args"><thead><tr><th>argument</th><th>type</th><th>optional</th><th>default</th><th>description</th></tr></thead><tbody><tr><td class="argument">itemConfiguration</td><td class="type">Object</td><td class="optional">false</td><td class="default">-</td><td class="description">An item configuration (can be an entire tree of items)</td></tr><tr><td class="argument">parent</td><td class="type">Item</td><td class="optional">true</td><td class="default">-</td><td class="description">A parent item</td></tr></tbody></table><p>Creates a new content item or tree of content items from configuration. Usually you wouldn&#39;t call this directly, but instead use methods like <code>layout.createDragSource()</code>, <code>item.addChild()</code> or <code>item.replaceChild()</code> that all call this method implicitly.</p></div><div class="section"><h2><a name="createPopout( configOrContentItem, dimensions, parentId, indexInParent )">createPopout( configOrContentItem, dimensions, parentId, indexInParent )</a></h2><table class="args"><thead><tr><th>argument</th><th>type</th><th>optional</th><th>default</th><th>description</th></tr></thead><tbody><tr><td class="argument">configOrContentItem</td><td class="type">GoldenLayout config or contentItem</td><td class="optional">false</td><td class="default">-</td><td class="description">The content item or config that will be created in the new window. If a item is provided its config will be read, if config is provided, only the content key will be used</td></tr><tr><td class="argument">dimensions</td><td class="type">Object</td><td class="optional">false</td><td class="default">-</td><td class="description">A map containing the keys left, top, width and height. Left and top can be negative to place the window in another screen.</td></tr><tr><td class="argument">parentId</td><td class="type">String</td><td class="optional">true</td><td class="default">null</td><td class="description">The id of the item within the current layout the child window&#39;s content will be appended to when popIn is clicked</td></tr><tr><td class="argument">indexInParent</td><td class="type">Number</td><td class="optional">true</td><td class="default">null</td><td class="description">The index at which the child window&#39;s contents will be appended to</td></tr></tbody></table><p>Creates a new popout window with configOrContentItem as contents at the position specified in dimensions</p><pre><code><span class="token comment" spellcheck="true">/*
 * Open a popout with testComponent as content.
 * Since parentId and indexInParent aren't specified
 * the component will be appended to the topmost
 * layout element if popIn() is called
 */</span>
myLayout<span class="token punctuation" >.</span><span class="token function" >createPopout<span class="token punctuation" >(</span></span><span class="token punctuation" >{</span>
    componentName<span class="token punctuation" >:</span> <span class="token string" >'testComponent'</span><span class="token punctuation" >,</span> 
    type<span class="token punctuation" >:</span> <span class="token string" >'component'</span>
<span class="token punctuation" >}</span><span class="token punctuation" >,</span> <span class="token punctuation" >{</span>
    width<span class="token punctuation" >:</span> <span class="token number" >200</span><span class="token punctuation" >,</span> 
    height<span class="token punctuation" >:</span> <span class="token number" >300</span><span class="token punctuation" >,</span> 
    left<span class="token punctuation" >:</span> <span class="token number" >400</span><span class="token punctuation" >,</span> 
    top<span class="token punctuation" >:</span> <span class="token number" >100</span>
<span class="token punctuation" >}</span><span class="token punctuation" >)</span><span class="token punctuation" >;</span>
</code></pre></div><div class="section"><h2><a name="createDragSource( element, itemConfiguration )">createDragSource( element, itemConfiguration )</a></h2><table class="args"><thead><tr><th>argument</th><th>type</th><th>optional</th><th>default</th><th>description</th></tr></thead><tbody><tr><td class="argument">element</td><td class="type">DOM or jQuery element</td><td class="optional">false</td><td class="default">-</td><td class="description">The DOM element that will be turned into a dragSource</td></tr><tr><td class="argument">itemConfiguration</td><td class="type">Object</td><td class="optional">false</td><td class="default">-</td><td class="description">An item configuration (can be an entire tree of items)</td></tr></tbody></table><p>Turns a DOM element into a dragSource, meaning that the user can drag the element directly onto the layout where it turns into a contentItem.</p></div><div class="section"><h2><a name="selectItem( contentItem )">selectItem( contentItem )</a></h2><table class="args"><thead><tr><th>argument</th><th>type</th><th>optional</th><th>default</th><th>description</th></tr></thead><tbody><tr><td class="argument">contentItem</td><td class="type">Object</td><td class="optional">false</td><td class="default">-</td><td class="description">A ContentItem instance</td></tr></tbody></table><p>If <code>settings.selectionEnabled</code> is set to true, this allows to select items programmatically.</p></div><div class="section"><h2><a name="GoldenLayout.minifyConfig( config )">GoldenLayout.minifyConfig( config )</a></h2><table class="args"><thead><tr><th>argument</th><th>type</th><th>optional</th><th>default</th><th>description</th></tr></thead><tbody><tr><td class="argument">config</td><td class="type">Object</td><td class="optional">false</td><td class="default">-</td><td class="description">A GoldenLayout configuration object</td></tr></tbody></table><p>Static method on the GoldenLayout constructor! This method will iterate through a GoldenLayout config object and replace frequent keys and values with single letter substitutes.</p></div><div class="section"><h2><a name="GoldenLayout.unminifyConfig( minifiedConfig )">GoldenLayout.unminifyConfig( minifiedConfig )</a></h2><table class="args"><thead><tr><th>argument</th><th>type</th><th>optional</th><th>default</th><th>description</th></tr></thead><tbody><tr><td class="argument">config</td><td class="type">Object</td><td class="optional">false</td><td class="default">-</td><td class="description">A minified GoldenLayout configuration object</td></tr></tbody></table><p>Static method on the GoldenLayout constructor! This method will reverse the minifications of GoldenLayout.minifyConfig.</p><p></div></p>
				
				<h3>Comments and Questions</h3>
				<div id="disqusContainer">
					<div id="disqus_thread"></div>
				    <script type="text/javascript">
				        /* * * CONFIGURATION VARIABLES: EDIT BEFORE PASTING INTO YOUR WEBPAGE * * */
				        var disqus_shortname = 'goldenlayoutcom'; // required: replace example with your forum shortname

				        /* * * DON'T EDIT BELOW THIS LINE * * */
				        (function() {
				            var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true;
				            dsq.src = '//' + disqus_shortname + '.disqus.com/embed.js';
				            (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
				        })();
				    </script>
				    <noscript>Please enable JavaScript to view the <a href="http://disqus.com/?ref_noscript">comments powered by Disqus.</a></noscript>
				    <a href="http://disqus.com" class="dsq-brlink">comments powered by <span class="logo-disqus">Disqus</span></a>
			    
					
					
				</div>
			</div>
		</div>
		<script type="text/javascript" src="../assets/js/docs.js"></script>
		
		<div id="footerPush"></div>
	</div>
	<div id="footer">
		<div class="footer-content">
			<div class="copyright">&copy;<span class="year"></span> deepstreamHub GmbH</div>
			<script type="text/javascript">
			$('.year').html( (new Date()).getFullYear() );
			</script>
			<ul class="footerItems">
				<li>
					<a href="https://github.com/deepstreamIO/golden-layout">Github</a>
					<a href="https://www.npmjs.com/package/golden-layout">NPM</a>
					<div>bower/npm: <code>'golden-layout'</code></div>
				</li>
				<li>
					<div>deepstreamHub GmbH</div>
					<div>Lindenstrasse 20-25</div>
					<div>10969 Berlin</div>
				</li>
				<li>
					<a href="mailto:info@deepstreamhub.com">info@deepstreamhub.com</a>
					<a href="https://deepstreamhub.com/">deepstreamHub.com</a><br />
					<a href="https://twitter.com/wolframhempel">by @wolframhempel</a>

				</li>
			</ul>
		</div>
	</div>

	<script type="text/javascript" src="../assets/js/Modal.js"></script>
	
	<script>
	  (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
	  (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
	  m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
	  })(window,document,'script','//www.google-analytics.com/analytics.js','ga');

	  ga('create', 'UA-63583386-5', 'auto');
	  ga('send', 'pageview');

	</script>
	
</body>
</html>